<template>
    <div class="wel-box">
            <van-circle v-model:current-rate="timeCounter"
            @click='closeTimer'
            :color="{
                '0%': '#ffd8bf',
                '100%': '#d4380d'
            }"
            :clockwise="false"
            size="42px"
            class="my-timer"
            :text="`${Math.ceil(timeCounter / 20)}s`"/>
        <i class="logo"/>
        <div class="title">万象</div>
        <div class="sub-title">大千世界,无所不有</div>
        <div class="right">powered by qianfeng &copy;2022-12</div>
    </div>
</template>

<script setup>
    import { defineEmits,onMounted,ref} from 'vue'
    import { autoLoginApi} from '../../apis/loginApi'
    import {commonDefinition} from '../../store'
    import {deCodeApi} from '../../utils'
    import {useRouter} from 'vue-router'
    const _router = useRouter()
    const timeCounter = ref(0)
    const emit = defineEmits(['changePage'])
    const hasAutoLoginSuccess = ref(false) // 免登录是否成功
    const hasLogin = ref(true) // 免登录请求中
    const _timer = ref(0)
    onMounted(function(){
        /**
         * 获取免登录的缓存信息，如果信息存在，那么需要解密信息
         * 判断是否过期，因为7天免登录
         * 进行免登录请求
         */
        let autoCache = localStorage.getItem('auto-login')
        if(autoCache){
            try{
                // debugger
                autoCache = deCodeApi(autoCache).split('---')
                let hasIn = (7 * 24 * 60 * 60 * 1000) - (Date.now() - autoCache[1]) > 0
                if(hasIn) {
                    commonDefinition().setToken(autoCache[0])
                    autoLoginApi().then( d =>{
                        console.log(d)
                        // debugger
                        if(d.code ===200){
                            /**
                             * 免登录成功以后
                             * 1、如果页面倒计时没有完成，等倒计时完成以后，跳转到首页
                             */
                            hasAutoLoginSuccess.value = true
                        } 
                        // 请求完成以后，免登录请求结束
                        hasLogin.value = false
                    })
                    }else{
                        // 如果没有在有效期内，那么免登录请求直接结束
                        hasLogin.value = false                    
                    }
                }catch{
                    /** 解密报错了，那么免登录请求相当于已经结束 */
                    hasLogin.value = false
                }
            }else{
                hasLogin.value = false
            }

        _timer.value=setInterval(function(){
            timeCounter.value--;
            console.log('------倒计时')
            if(timeCounter.value < 2){
                clearInterval(_timer.value)
                /** 如果用户免登录成功了，那么跳转到首页 */
                if (hasAutoLoginSuccess.value) {
                    _router.push('/home')
                } else {
                    emit('changePage')
                }
            }
        },1000 / 20)
    })

    function closeTimer(){
        if (hasLogin.value) return

        clearInterval(_timer.value)
        if (hasAutoLoginSuccess.value) {
            _router.push('/home')
        } else {
           emit('changePage')
        }
    }
</script>
<style lang="less" scoped>
    @import '../../style/common.less';
    .wel-box {
        display: block;
        position: relative;
        height: 100%;
        padding: 10vh;
        > .my-timer {
            position: absolute;
            top: 15px;
            right: 15px;
        }
        > .logo {
            display: block;
            position: relative;
            height: 64px;
            width: 48px;
            margin: auto;
            background: url(../../images/logo.png) center center / 48px 48px no-repeat;
        }
        > .title {
            display: block;
            text-align: center;
            font-size: .9rem;
            font-weight: 600;
            color: @c07;
        }
        > .sub-title {
            display: block;
            text-align: center;
            font-size: .65rem;
            color: @c07;
            // margin-top: 12px;
            margin:12px auto;
            padding: 0 16px;
        }
        > .right {
            display: block;
            position: absolute;
            left: 0;
            bottom: 10px;
            width: 100%;
            text-align: center;
            font-size: .6rem;
            transform: scale(.9);
            color: @g05;
        }
    }
</style>